<template>
  <div class="container">
    <!-- 条件 -->
    <div class="disflex spacebetween align-center">
      <Navbars></Navbars>
      <el-button class="abtncolor" size="small" icon="el-icon-plus" type="primary" @click="handleAdd">创建分支</el-button>
    </div>
    <!-- 表格 -->
    <el-row  :gutter="20">
        <el-col :span="6" class="colss mt15" v-for="(item,index) in this.dataForm" :key="index">
            <el-card class="box-card"  shadow="never" >
                <div class="listcont" @click="handletoITEM(item)">
                  <div class="disflex spacebetween title">
                    <div>
                      <div class="namtitle">{{item.name}}</div>
                      <div class="lstime">{{item.createTime}}</div>
                    </div>
                    <i class="el-icon-more" style="margin-bottom:20px"></i>
                  </div>
                  <div class="disflex" style="margin-top:10px">
                    <div>编号：</div>
                    <div>{{item.code}}</div>
                  </div>
                  <div class="btnlist">
                    <el-button type="primary" class="btncolorbj" size="small" @click.stop="handleEdit(item.id)">编辑</el-button>
                    <el-button type="primary" class="tijiao" size="small" @click.stop="handleTem(item)">提交合并</el-button>
                    <el-button type="primary" class="btncolorbj" size="small" @click.stop="handleDel(item)">删除</el-button>
                  </div>
                </div>
            </el-card>
        </el-col>
      <!--分页 -->
      <!-- <Pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.num" @pagination="getList"></Pagination> -->
    </el-row>
    <!-- 创建分支 -->
    <el-dialog :title="title" :visible.sync="aisvisible" width="40%" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm"  label-width="80px">
        <el-form-item label="克隆分支" prop="name">
          <el-select v-model="addForm.targerBranchId" placeholder="请选择">
            <el-option
              v-for="item in dataForm"
              :key="item.value"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分支名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="分支编码" prop="code">
          <el-input v-model="addForm.code"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="code">
          <el-input type="textarea" v-model="addForm.remarks"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleonSubmit('addForm')" class="btncolor" size="small" :loading="loading" :disabled="loading">确定</el-button>
          <el-button @click="aisvisible = false" size="small">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 提交合并弹窗 -->
    <el-dialog title="提交合并" :visible.sync="isvisible" width="40%" :close-on-click-modal="false">
      <el-form ref="requstForm" :model="requstForm"  label-width="80px">
        <el-row :gutter="20">
          <el-col :span="9">
             <el-form-item label="分支名称" prop="name">
              <el-input v-model="oldname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" class="disflex spacecenter align-center" style="height:45px">
            <el-image fit="cover" style="width:130px;height:34px" :src="require('@/assets/arrow.png')" />
          </el-col>
          <el-col :span="10">
            <el-form-item label="分支名称" prop="name">
              <el-select v-model="requstForm.toBranchId" placeholder="请选择">
                <el-option
                  v-for="item in dataForm"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="code">
          <el-input type="textarea" v-model="requstForm.remarks"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="onSubmit('requstForm')" class="btncolor" size="small" :loading="loading" :disabled="loading">提交合并</el-button>
          <el-button @click="isvisible = false" size="small">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {branmergereq,brandel,branaddl,branchpage,branchdetail} from '@/api/version.js'
import { projectpage} from '@/api/manager.js'
import { dicttype } from "@/api/role.js";
import Pagination from '@/components/Pagination'
export default {
  name: 'user',
  components: { Pagination },
  data() {
    return {
      total: 0,
      listLoading: true,
      dataForm:{},
      tableData:[],
      listQuery:{},
      requstForm:{},
      loading:false,
      isvisible:false,
      title:"创建分支",
      addForm:{},
      aisvisible:false,
      projectList:[],
      projectId:this.$route.query.id,
      oldname:'',
      oldcode:''
    }
  },
  created() {
    // this.getList()
    this.getDetail()
  },
  methods: {
    //获取详情
    getDetail(){
        this.$getFlag().then(obj=>{
          let data = {
            page:1,
            num:10,
            projectId:this.projectId
          }
          branchpage(data,obj.data).then(res=>{
                if(res.status==200){
                    this.dataForm = res.list
                }
            })
        })
    },
    // 创建分支
    handleAdd(){
      this.title = "创建分支"
      this.aisvisible = true
      this.addForm={}
    },
    // 创建分钟确定
    handleonSubmit(){
      this.addForm.projectId = this.projectId
      this.$getFlag().then(obj=>{
        this.listLoading = false
        branaddl(this.addForm,obj.data).then(res => {
          if(res.status == 200){
            this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
            this.getDetail()
            this.aisvisible = false
          }else{
            this.$notify({ title: "操作失败",message: res.error, type: "error", duration: 2000,});
          }
        })
      })
    },
    // 提交合并弹窗
    handleTem(item){

      this.isvisible = true
      this.requstForm = {}
      this.requstForm.branchId = item.id
      this.requstForm.projectId = item.projectId
      this.oldname = item.name
      this.oldcode = item.code
    },
    // 提交合并确定
    onSubmit(){
      
      this.$getFlag().then(obj=>{
          branmergereq(this.requstForm,obj.data).then(res=>{
              if(res.status==200){
                if(res.status == 200){
                  this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                  this.getDetail()
                  this.isvisible = false
                }else{
                  this.$notify({ title: "操作失败",message: res.error, type: "error", duration: 2000,});
                }
              }
          })
      })
    },
    // 删除
    handleDel(item){
      this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        this.$getFlag().then(obj=>{
          brandel({id:item.id,name:item.name,projectId:item.projectId},obj.data).then(res=>{
              if(res.status == 200){
                this.$notify({  title: "操作成功", message: res.msg, type: "success",duration: 2000,});
                this.getDetail()
              }else{
                this.$notify({ title: "操作失败",message: res.msg, type: "error", duration: 2000,});
              }
          })
        }) 
      })
      .catch(() => {});
    },
    // 编辑跳转
    handleEdit(id){
      this.title = "编辑分支"
      this.aisvisible = true
      this.$getFlag().then(obj=>{
        branchdetail({id:id},obj.data).then(res=>{
          if(res.status == 200){
            this.addForm = res.data
            this.addForm.targerBranchId = res.data.id
          }
        })
      })
    },
    // 跳转到对应的详情页
    handletoITEM(item){
      this.$router.push({
        path: '/manageritem',
        query:{id:item.id}
      })
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .stafftree .el-tree-node__content .el-checkbox .el-checkbox__input {
  display: none;
}
.listcont{
  .title{
    height: 40px;
    align-items: center;
    .lstime{
      font-size: 12px;
      color: #666;
    } 
  }
  .btnlist{
    padding:20px 0 20px 0;
    display: flex;
    justify-content:flex-end
  }
}

</style>
<style>
  .el-table .warning-row {
    background: #f6f9fe;
  }
  .tagcolor{
    color:#fff
  }
  .colss{

  }
  .querydiv{
    display: flex;
    justify-content: space-between;
  }
  .abtncolor{
    height:31px;
   background-color: #6695e3;
  }
  .lstime{
    color: #b2b2b2;
    font-size: 12px;
  }
  .namtitle{
    font-weight: 600;
    font-size: 18px;
  }
  .btncolorbj{
    background-color:#e8efff ;
    border: 1px solid #e8efff;
    color: #409EFF;
  }
  .tijiao{
    background-color: #acc7f6;
    border: 1px solid #acc7f6;
  }
</style>
